<template>
    <div>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 2px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Form :model="formItem" label-position="left" inline>
                                <FormItem :label-width="58" label="时间范围：">
                                    <DatePicker size="small" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></DatePicker>
                                </FormItem>
                                <FormItem :label-width="35" label="彩种：">
                                    <Select v-model="model2" size="small" style="width:100px">
                                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                    </Select>
                                </FormItem>
                                <Button type="primary"  size="small" style="margin-top: 5px;">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 5px;">重置</Button>
                                <ButtonGroup shape="circle" style="float: right;">
                                    <Button :type="selected==1?'primary':'ghost'" @click="changeSelectedProfit">
                                        <Icon type="android-happy" style="color:#00ff61;"></Icon>
                                        盈利排行
                                    </Button>
                                    <Button :type="selected==0?'primary':'ghost'" @click="changeSelectedLoss">
                                        亏损排行
                                        <Icon type="android-sad" style="color:#ff8800;"></Icon>
                                    </Button>
                                </ButtonGroup>
                            </Form>
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con">
                    <Table border stripe :columns="title" :data="data" ></Table>
                    <Row class="margin-top-10" :gutter="10">
                        <Col :md="12" :lg="12">
                            <Page :total="100"  class-name="page-margin-top" show-elevator></Page>
                        </Col>
                        <Col :md="12" :lg="12">
                            
                        </Col>
                    </Row>
                    
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less">
    // .ivu-form-item{
    //     margin-bottom:0px;
    // }
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            formItem:{
                    input:''
            },
            selected:'1',
            cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    },
                    {
                        value: 'Paris',
                        label: 'Paris'
                    },
                    {
                        value: 'Canberra',
                        label: 'Canberra'
                    }
                    
                ],
                model2: '',
            data:[
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                {
                    username:'zhangsan',
                    dj:'0',
                    cd:'0',
                },
                {
                    username:'lishi',
                    dj:'1',
                    cd:'0',
                },
                {
                    username:'wangwu',
                    dj:'0',
                    cd:'1',
                },
                
            ],
            title:[
                {
                    title:'排名ID',
                    type: 'index',
                    align:'center',
                    width:'80'
                },
                {
                    title:'用户名',
                    key: 'username',
                    align:'center',
                    // width:'90'
                },
                {
                    title:'登陆地点',
                    key: 'usernamen',
                    align:'center',
                },
                {
                    title:'最后登陆时间',
                    key: '',
                    align:'center',
                },
                {
                    title:'下注总额',
                    key: '',
                    align:'center',
                },
                {
                    title:'中奖总额',
                    key: '',
                    align:'center',
                },
                {
                    title:'用户输赢',
                    key: '',
                    align:'center',
                },
                {
                    title:'彩中亏盈',
                    key: '',
                    align:'center',
                }
            ]
                
            
        }
    },
    computed: {
        
    },
    methods: {
        changeSelectedProfit(){
            this.selected=1
        },
        changeSelectedLoss(){
            this.selected=0
        }
    }
};
</script>
